<template>
	<wsPage title="商品列表">
		<div slot="page_operate">
			<Button type="ghost" @click="refresh">
                <Icon type="refresh"></Icon>
                <span>刷新</span>
            </Button>
		</div>
		
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="商品名称">
						<Input v-model="queryPanel.model.name" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="商户名称">
						<Input v-model="queryPanel.model.shop" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="发布类型">
						<Select clearable v-model="queryPanel.model.promotionStatus" placeholder="请选择" class="ws-form-select">
							<Option value="0">上新</Option>
							<Option value="1">折扣</Option>
						</Select>
					</FormItem>
					<FormItem label="销售类型">
						<Select clearable v-model="queryPanel.model.saleType" placeholder="请选择" class="ws-form-select">
							<Option value="1">现货</Option>
							<Option value="2">预售</Option>
						</Select>
					</FormItem>
				</Form>
			</div>
			<div slot="list_operate">
				<!--<Button type="ghost" :disabled="!isTableSelected" @click="showAuditModal">审核</Button>-->
			</div>
			<div slot="list_data">
				<ws-table :data="table.data" style="width: 100%">
					<ws-table-column align="center" label="主图" width="110">
						<template slot-scope="scope">
							<img :src="scope.row.primaryPicUrl" style="width: 100px;height: 80px;" />
						</template>
					</ws-table-column>
					<ws-table-column align="center" prop="name" label="商品名称" min-width="200"></ws-table-column>
					<ws-table-column align="center" prop="merchantName" label="店铺"></ws-table-column>
					<ws-table-column align="center" prop="brandName" label="品牌"></ws-table-column>
					<ws-table-column align="center" label="发布类型">
						<template slot-scope="scope">
							<Tag v-if="scope.row.promotionStatus == 0" color="blue">上新</Tag>
							<Tag v-if="scope.row.promotionStatus == 1" color="green">折扣</Tag>
						</template>
					</ws-table-column>
					<ws-table-column align="center" label="销售类型">
						<template slot-scope="scope">
							<Tag v-if="scope.row.saleType == 1" color="blue">现货</Tag>
							<Tag v-if="scope.row.saleType == 2" color="green">预售</Tag>
						</template>
					</ws-table-column>
					<ws-table-column align="center" label="价格">
						<template slot-scope="scope">
							<span style="color: red;" v-text="scope.row.price"></span>
						</template>
					</ws-table-column>
					<ws-table-column align="center" prop="createDate" label="发布日期"></ws-table-column>
					<ws-table-column align="center" width="150" label="操作">
						<template slot-scope="scope">
							<Button @click="openMask(scope.row)" type="text" size="small">预览</Button>
							<Button @click="showAuditModal(scope.row)" type="text" size="small">审核</Button>
							<Button @click="showAuditModal(scope.row)" type="text" size="small">翻译</Button>
						</template>
					</ws-table-column>
				</ws-table>
			</div>
		</wsSmPanel>

		<!--审核商品模态框-->
		<wsModal v-model="auditModal.show" ok-text="提交" title="审核商品" @on-ok="saveModal" @on-cancel="auditCancel">
			<Form :model="auditModal.form" :rules="auditModal.validate" :label-width="100">
				<FormItem label="审核状态" prop="status">
					<RadioGroup v-model="auditModal.model.action">
						<Radio :label="1">通过</Radio>
						<Radio :label="2">不通过</Radio>
					</RadioGroup>
				</FormItem>
				<FormItem label="审核意见">
					<Input v-model="auditModal.model.memo" placeholder="请输入" type="textarea"></Input>
				</FormItem>
			</Form>
		</wsModal>
		<!-- preview start -->
		<div id="preview-mask">
			<div class="x-layer">
				<div class="inner-box">
					<div class="close-btn" @click="closeMask">
						<Icon type="close-round"></Icon>
					</div>
					<!-- A start -->
					<div class="layer-content" id="productDetail" style="overflow: hidden;">
					</div>
				</div>
			</div>
		</div>
		<!-- preview end -->
	</wsPage>
</template>
<script>
	import Util from "../../../common/util.js";
	import $ from "jquery";

	export default {
		data() {
			return {
				queryPanel: {
					conditions: {
						
					},
					model: {
						name: '',
						promotionStatus: '',
						saleType: '',
						shop: ''
					}
				},
				table: {
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					},
					selection: [] //选中
				},
				//审核模态框
				auditModal: {
					show: false,
					model: {
						action: 1,
						memo: ''
					},
					validate: {
						memo: [
	                        { required: true, message: '审核意见不能为空', trigger: 'blur' }
	                    ],
					}
				},
				edit: {
					row: null
				}
			};
		},
		computed: {
			/**
			 * 表格行是否为选中状态
			 */
			isTableSelected() {
				return this.table.selection.length > 0;
			},
			isEdit() {
				return !Util.vad.isBlank(this.propertyModal.form.id);
			}
		},
		mounted() {
			this.init();
			this.url = Util.previewUrl() || "";
		},
		methods: {
			//刷新
			refresh() {
				this.queryPanel.model.name = '';
				this.queryPanel.model.promotionStatus = '';
				this.queryPanel.model.saleType = '';
				this.queryPanel.model.shop = '';
				this.table.data = [];
				this.table.page.total = 0; //总条数
				this.table.page.pageNum = 1; //当前页
				this.table.page.pageSize = 10; //每页显示条数
				this.table.selection = []; //选中
				this.init();
			},
			init() {
				this.query();
				this.queryTree();
			},
			/**
			 * 查询所属分类
			 */
			queryTree: function() {
				const _this = this;
				this.axios.get("/ws/ops/categoryTree").then(response => {
					_this.options = [];
					//赋值
					_this.options = response.data.data;
				});
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios
					.get("/ws/ops/v2/product/" + pageSize + "/" + pageNum, {
						params: _this.queryPanel.model
					})
					.then(response => {
						var res = response.data;
						var resMeta = res.meta;
						if(0 == resMeta.code) {
							_this.buildPageData(res.data);
						} else {
							_this.$Message.warning(resMeta.message);
						}
					});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			/**
			 * 表格选择变更事件
			 */
			tableSelected(selection_) {
				this.table.selection = selection_;
			},

			/*预览页面居中*/
			resize() {
				var winHeight = $(window).height();
				if(winHeight < 790) {
					$(".x-layer").css({
						display: "block"
					});
					$(".inner-box").css({
						margin: "50px auto"
					});
				} else {
					$(".x-layer").css({
						display: "flex"
					});
					$(".inner-box").css({
						margin: "auto"
					});
				}
			},
			controlMask(flag, productId) {
				var _this = this;
				if(flag) {
					let html = '<iframe src="https://api.beautystudio.com.cn/h5/product-details.html?preview=1&id='+productId+'" width="355px" height="585px"></iframe>';
					$("#preview-mask .x-layer .layer-content").html(html);
					$("#preview-mask").show();
					$("html").css("fontSize", "26.88px");
					_this.resize();
					$(window).resize(function(event) {
						_this.resize();
					});
				} else {
					$("#preview-mask").hide();
					$("html").css("fontSize", "auto");
				}
			},
			openMask(obj) {
				let productId = obj.id;
				this.controlMask(true, productId);
			},
			closeMask() {
				this.controlMask(false);
			},
			/**
			 * 新增弹框确认操作
			 */
			saveModal() {
				this.$refs['model'].validate((valid) => {
					if (valid) {
						this.auditOk();
						this.modal.show = false;
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                    
               });
			},
			/**
			 * 审核通过
			 */
			auditOk() {
				const _this = this;
				let currRow = this.edit.row;
				let postData_ = this.auditModal.model;
				postData_['productId'] = currRow.id;
				postData_['tenantId'] = currRow.tenantId;
				this.axios
					.put("/ws/ops/v2/product/audit", postData_)
					.then(response => {
						var res = response.data;
						var resMeta = res.meta;
						if(0 == resMeta.code) {
							_this.query();
							_this.auditCancel();
						} else {
							_this.$Message.warning(resMeta.message);
						}
					});
			},
			/**
			 * 审核取消
			 */
			auditCancel() {
				this.auditModal.show = false;
				this.auditModal.model.action = 1;
				this.auditModal.model.memo = '';
			},
			/**
			 *显示审核模态框 
			 */
			showAuditModal(row) {
				this.edit.row = row;
				this.auditModal.show = true;
			}
		}
	};
</script>

<style scoped>
	.tab-demo {
		margin-bottom: 10px;
	}
	
	.ws-form-select {
		width: 162px;
	}
	
	#preview-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
		overflow: auto;
		display: none;
	}
	
	#preview-mask .x-layer {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	#preview-mask .x-layer .inner-box {
		width: 384px;
		height: 774px;
		position: relative;
		background: url(../../../assets/images/product/bgiphone.png) no-repeat;
	}
	
	#preview-mask .x-layer .inner-box .close-btn {
		position: absolute;
		top: -15px;
		right: -15px;
		font-size: 20px;
		text-align: center;
		line-height: 26px;
		width: 30px;
		height: 30px;
		color: #fff;
		border: 1px solid #fff;
		border-radius: 50%;
		cursor: pointer;
	}
	
	#preview-mask .x-layer .inner-box .layer-content {
		position: absolute;
		top: 102px;
		left: 22px;
		width: 338px;
		height: 586px;
		border: 1px solid #999;
		background: #f9f9f9;
		overflow-x: auto;
	}
	
	#preview-mask .x-layer .inner-box .detail-more {
		position: absolute;
		top: 102px;
		left: 22px;
		width: 338px;
		height: 586px;
		border: 1px solid #999;
		background: #f9f9f9;
	}
</style>
<!-- css start -->
